<template>
  <pc-nav></pc-nav>
  <div class="container-fluid swiper-top" v-if="state.pcbanner">
    <swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="5000" duration="500"
            style="height: 400px">
      <swiper-item style="height: 400px;" v-for="(item, index) in state.pcbanner">
        <view class="swiper-item swiper-item1" style="height: 400px">
          <A :href="item.url">
            <image mode="aspectFill"
                   :src="'https://file-1259487950.cos.ap-beijing.myqcloud.com/' + item.src"
                   class="d-block w-100" style="width: 100%; height: 400px" />
          </A>
        </view>
      </swiper-item>
    </swiper>
    <div class="container">
      <div class="menu">
        <ul>
          <li @click="sheep.$router.go('/pages/goods/list?categoryId=170&categoryName=一级造价工程师')">
            一级造价工程师
            <uni-icons custom-prefix="iconfont" type="icon-bofang" size="9"
                       style="color:#FFFFFF"></uni-icons>
          </li>
          <li @click="sheep.$router.go('/pages/goods/list?categoryId=168&categoryName=消防工程师')">
            注册消防工程师
            <uni-icons custom-prefix="iconfont" type="icon-bofang" size="9"
                       style="color:#FFFFFF"></uni-icons>
          </li>
          <li @click="sheep.$router.go('https://channels.weixin.qq.com/shop/b/hiGOzoTlXKkQO5d')">
            图书
            <uni-icons custom-prefix="iconfont" type="icon-bofang" size="9"
                       style="color:#FFFFFF"></uni-icons>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container mt-3 mb-3 p-2" style="display: none;">
    <div class="row">
      <div class="col">
        <img src="https://wkadmin.jhpress.com/uploads/wxw/duihuan.png" class="img-fluid" />
      </div>
      <div class="col">
        <img src="https://wkadmin.jhpress.com/uploads/20241207/1a17e958fd1c18853a8c476aac971fed.png"
             class="img-fluid" />
      </div>
      <div class="col">
        <img src="https://wkadmin.jhpress.com/uploads/20241207/711da4abe9fc35a3dd15837c21e78e07.png"
             class="img-fluid" />
      </div>

    </div>
  </div>

  <div class="container mb-3" v-if="state.goodscard.data">
    <div class="row">
      <h3 class="category-tit">精品班型</h3>
    </div>
    <div class="row">
        <s-block>
          <s-block-item type="goodsCardpc" :data="state.goodscard.data" />
        </s-block>
    </div>
  </div>

  <div class="container mb-3" v-if="template">
    <div class="row">
      <h3 class="category-tit">讲师介绍</h3>
    </div>
    <div class="row">
      <s-mingshi :date_mingshi="state.mingshi"></s-mingshi>
    </div>
  </div>

  <div class="container mb-3 p-3" style="text-align: center">
    <img style="width: 100%;"
         src="@/static/images/qywx-foot.png" model="widthFix"/>
  </div>
  <!--  <div class="container mb-3 p-2">-->
  <!--    <img style="width: 50%;" src="https://wkadmin.jhpress.com/uploads/20241124/9971a49760a07c313b47c1813ed8fda1.png"/>-->
  <!--  </div>-->
  <div class="container-fluid">
    <pc-footer></pc-footer>
  </div>
  <!-- 广告模块 -->
  <s-popup-image />


</template>
<script setup>
  import {
    computed,
    reactive,
    watch
  } from 'vue';

  import {
    onLoad,

  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  import {
    forEach
  } from 'lodash';
  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';
  import request from '@/sheep/request';



  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  const template = computed(() => sheep.$store('app').template?.home);
  //const appcontent = sheep.$store('app').template?.home;
  const state = reactive({
    goodscard:{},
    pcbanner:'',
    mingshi:[]
  });
  //const goodscard = template.value?.data[4];
  /*const pcbanner = reactive({
    data: [
      {
        "title": "1",
        "type": "image",
        "src": "/uploads/20250223/ee1e2af1b921487be1a7a84a514a739f.png",
        "poster": "",
        "url": "https://wk.jhpress.com/ztpages/250122/index.html"
      },
      {
        "title": "2",
        "type": "image",
        "src": "/uploads/20250223/39e5f772ea0b69e4f9877e32f06cdf76.png",
        "poster": "",
        "url": "https://wk.jhpress.com/ztpages/250211/index.html"
      },
      {
        "title": "3",
        "type": "image",
        "src": "/uploads/20250223/63cd3aded0098ed044899a6ee6bade4f.png",
        "poster": "",
        "url": "https://wk.jhpress.com/weixin/#/pages/goods/index?id=139"
      }
    ],
  });*/



  /*const mingshi = reactive({
    //data:[]
    //data: template.value.data[6].data.list,
    data:[
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/a993804d6c96eeb35dc538e75bc10dba.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/5e3fbe1addb7c493fa9f75eacd93a4bc.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/8931fa635b90d129e2aadbe9499bb315.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/bbee9b26b63b5d4477d596f25421633a.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/1eaac2e8d646b53c1d9120824a160cd8.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/8f849de2621e444b040d5590d44c4331.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/53e1b8de85651ba0730f56de7e8e97dd.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/62400c3caaa6d3163f6fad0d5f12d2c4.png",
        "poster": "",
        "url": ""
      },
      {
        "title": "",
        "type": "image",
        "src": "/uploads/20241223/9c632cbf755924406a8abd7686129655.png",
        "poster": "",
        "url": ""
      }
    ]
  });*/

  //console.log(goodscard.data);
  // 监听 template 的变化
  watch(
    () => template.value,
    (newTemplate) => {
      if (newTemplate) {
        state.goodscard = newTemplate.data?.[4] || [];
        state.mingshi = newTemplate.data?.[6]?.data?.list || [];
      }
    },
    { immediate: true } // 立即执行一次
  );

  function getRecommend(params) {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await request({
          url: 'index/page?id=14',
          method: 'GET',
          params,
        });

        let ids = [];
        if (res.data) {
          ids = res.data.diypage.page.data[0].data.list;
        }
        state.pcbanner = ids;
      } catch (error) {
        reject(error);
      }
    });
  }


  onLoad((options) => {
    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }
    //console.log(options.taken);
    if(options.token){
      const code = sheep.$api.user.loginpc(options.token);
    }
    //state.goodscard = template.value?.data[4];
    getRecommend();
  });

</script>

<style type="text/style" scoped>
  @import "@/static/iconfont/iconfont.css";

  .category-tit{
    font-size: 24px !important;
    font-weight: bold;
    line-height: 44px;
    margin-top: 30px;
  }
  .swiper-top{position: relative;}
  .menu{
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    height: 370px;
    width: 250px;
    margin-top: 15px;
    border-radius: 10px;
    color: #FFFFFF;
    padding-top:15px;
  }
  .menu ul li{
    position: relative;
    padding-left: 1px;
    line-height: 50px;
    display: flex;
    align-items: center;
    cursor:pointer;
    font-size: 16px;
  }
  .menu ul li  .icon-bofang {
    margin-left: auto;
    width: 60px;
    font-size: 14px;
  }

  .m-60{
    margin-bottom: 60px;
  }
  .button-hover{background: none !important;}
  /* 自定义 Carousel 过渡效果 */
  .carousel-item {
    transition: transform 0.6s ease, opacity 0.6s ease-out; /* 注意 transform 在前 */
  }
  .carousel-control-next:hover, .carousel-control-prev:hover{ background-color: none;}
  .carousel-control-next:after, .carousel-control-prev:after{border: none;}

  /*讲师*/
  .banner {
    padding-top:80px;
  }
  .banner h1 {
    font-size:36px;
    text-align:center;
    font-weight:normal;
  }
  .banner h2 {
    font-size:18px;
    color:#535353;
    text-align:center;
    font-weight:normal;
    margin:20px 0 60px;
  }
  .banner .swiper {
    width:1200px;
    margin:0 auto;
    position:relative;
  }
  .current-swiper {
    width:650px;
    height:370px;
    border-radius:10px;
    margin:0 auto;
    box-shadow:0 0 20px rgba(0,0,0,0.05);
    position:relative;
    z-index:99;
  }
  .left-swiper {
    position:absolute;
    left:117px;
    top:52px;
    z-index:1;
  }
  .right-swiper {
    position:absolute;
    right:117px;
    left:auto;
    top:52px;
    z-index:1;
  }
  .nocurrent-swiper {
    width:479px;
    height:273px;
    border-radius:8px;
    box-shadow:0 0 20px rgba(0,0,0,0.05);
  }
  .nocurrent-swiper:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(237,240,240,0.9);
    z-index:99;
  }
  .slide1 {
    background:url(../images/p1.jpg) no-repeat right 50%/auto 100% #fff;
  }
  .slide2 {
    background:url(../images/p2.jpg) no-repeat right 50%/auto 100% #e2e3e8;
  }
  .slide3 {
    background:url(../images/p3.jpg) no-repeat right 50%/auto 100% #f0faf9;
  }
  .title {
    padding-top:70px;
    margin-left:45px;
    height:29px;
    line-height:29px;
    font-size:18px;
    color:#666;
  }
  .nocurrent-swiper .title {
    padding-top:44px;
    margin-left:30px;
    font-size:16px;
    height:25px;
    line-height:25px;
  }
  .name {
    margin-left:45px;
    height:55px;
    display:inline-block;
    position:relative;
    line-height:55px;
    padding-bottom:9px;
    padding-right:55px;
    border-bottom:1px solid #dddddd;
    font-size:36px;
    color:#333;
  }
  .nocurrent-swiper .name {
    height:46px;
    line-height:46px;
    font-size:30px;
    padding-right:46px;
    margin-left:30px;
  }
  .name:before {
    content:'';
    position:absolute;
    width:30px;
    height:30px;
    right:10px;
    top:0;
    bottom:0;
    margin:auto;
    background:url(../images/curr_sectbg.png) no-repeat center center;
  }
  .nocurrent-swiper .name:before {
    width:26px;
    height:26px;
    background-size:100% 100%;
  }
  .detail {
    margin-left:45px;
    width:275px;
    margin-top:30px;
    padding-right:5px;
    line-height:24px;
    color:#bbb;
    font-size:14px;
  }
  .nocurrent-swiper .detail {
    font-size:12px;
    line-height:20px;
    width:235px;
    margin-left:30px;
  }
  .swiper-button-prev {
    width:46px;
    height:46px;
    background:url(../images/curr_prev.png) no-repeat center center;
  }
  .swiper-button-next {
    width:46px;
    height:46px;
    background-size:auto;
    background-image:url(../images/curr_next.png);
  }
</style>